<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="one" class="aaa" style="background-color: red;">
        <i>1111</i>
    </div>
    <script>
       var divbox=document.getElementById("one");
       console.log(divbox);
       console.dir(divbox);

       console.log(divbox.id);

       divbox.className="bbb";

       console.log(divbox.style.backgroundColor);

       divbox.style.backgroundColor="blue";
       //点击onclick---执行函数
       divbox.onclick=function(){
         //alert("111");
         //innerHTML识别标签
         //divbox.innerHTML="<i>2222</i>";
         //innerText不能识别标签
         divbox.innerText="<i>2222</i>";
       }

       //移入
       divbox.onmouseover=function(){
          divbox.style.backgroundColor="red";
       }

       //移出
       divbox.onmouseout=function(){
         divbox.style.backgroundColor="blue";
       }
    </script>
</body>
</html>